<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" charset="utf-8">
    <title>古城快讯</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
    <link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css" media="screen" title="no title" charset="utf-8">
    <script src="jq/jquery-3.1.0.js" charset="utf-8"></script>
    <script src="bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
    <style media="screen">
      body{
        margin-top: 57px;
      }
      #nav{
        border-radius: 0;
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
      }
      #nav li{
        float: left;
        font-size: 16px;
      }
      .row>div{
        border: 1px solid red;
      }
      #reload{
        text-align: center;
      }
      #reload img{
        width: 30px;
        margin: 10px 0;
      }
    </style>
  </head>
  <body>
    <div class="cantainer-fluid">
      <!-- 头部内容 -->
      <div class="header">
        <nav id="nav" class="navbar navbar-inverse">
          <div class="container">
            <ul class="nav navbar-nav">
              <li><a href="">推荐</a></li>
              <li><a href="">视频</a></li>
              <li><a href="">热点</a></li>
              <li><a href="">体育</a></li>
              <li><a href="">西安</a></li>
            </ul>
          </div>
        </nav>
      </div>

      <!-- 内容部分 -->
      <div class="content">
        <!-- 隐藏的刷新图标，当页面下拉是弹出刷新图标 -->
        <div id="reload" class="row col-sx-12">
          <img src="img/reload.jpg" alt="" />
        </div>

        <!-- 新闻的内容和图片以及广告 -->
        <div class="container">
          <!-- 轮播图 重点头条图片新闻链接 -->
          <div class="row">
            <div id="carouselImage" class="carousel slide" data-ride="carousel">
              <ol class="carousel-indicators">
                <li class="active" data-target="#carouselImage" data-slide-to="0"></li>
                <li data-target="#carouselImage" data-slide-to="1"></li>
                <li data-target="#carouselImage" data-slide-to="2"></li>
                <li data-target="#carouselImage" data-slide-to="3"></li>
                <li data-target="#carouselImage" data-slide-to="4"></li>
                <li data-target="#carouselImage" data-slide-to="5"></li>
              </ol>

              <div class="carousel-inner">
                <div class="item active"><a href="" class="thumbnail"><img src="img/bigImage.png" alt="" /></a></div>
                <div class="item"><a href="" class="thumbnail"><img src="img/bigImage.png" alt="" /></a></div>
                <div class="item"><a href="" class="thumbnail"><img src="img/bigImage.png" alt="" /></a></div>
                <div class="item"><a href="" class="thumbnail"><img src="img/bigImage.png" alt="" /></a></div>
                <div class="item"><a href="" class="thumbnail"><img src="img/bigImage.png" alt="" /></a></div>
                <div class="item"><a href="" class="thumbnail"><img src="img/bigImage.png" alt="" /></a></div>
              </div>
            </div>
          </div>

          <div class="row">
            <!-- 新闻 -->
            <div class="col-md-8">
              <!-- js中创建生成,因为不确定到底有多少新闻，根据获取实时新闻来增加 -->
            </div>

            <!-- 广告 -->
            <div class="col-md-4">
              <!-- js中创建生成,因为不确定到底有多少新闻，根据获取实时新闻来增加 -->
            </div>
          </div>
        </div>

      </div>

      <!-- footer部分 -->
      <div class="footer">
        <div class="container-fluid">
          <div class="row">
            <div class="col-xs-3">1</div>
            <div class="col-xs-3">2</div>
            <div class="col-xs-3">3</div>
            <div class="col-xs-3">4</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
